<template>
  <div>
    <!-- 按钮 -->
    <el-button style="margin:10px 10px" type="primary" icon="el-icon-refresh-right" circle
      @click="getPageAccountDetailList"></el-button>
    <!-- 表格
      data 展示数据 —— 数组类型
    -->
    <el-button @click="handleExport2" style="margin-right: 30px;">导出报表</el-button>
    <el-date-picker v-model="valueData" value-format="yyyy-MM-dd" type="daterange" align="right" unlink-panels
      range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
    </el-date-picker>
    <el-button style="margin-left: 10px;" icon="el-icon-search" @click="rangeChange"></el-button>
    <el-table :height="tableHeight" ref="tableData" id="table" show-summary style="width: 100%;" border :data="list">
      <!-- 发起人 -->
      <el-table-column prop="userNickName" label="用户名称" align="center">
      </el-table-column>
      <el-table-column prop="costGold" label="作品加热核销金币" align="center">
      </el-table-column>
      <el-table-column prop="costMoney" label="作品加热核销金额" align="center">
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" align="center">
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <!-- <el-pagination style="margin-top:20px;textAlign:center" @size-change="handleSizeChange"
      @current-change="handleCurrentChange" :current-page="pageNumber" :page-sizes="[10, 50, 100]" :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination> -->
  </div>
</template>

<script>
  import {
    exportToExcel
  } from '@/utils/Export2Excel'
  export default {
    name: 'dynamicExtensionTable',
    data() {
      return {
        tableHeight: 800,
        valueData: [
          // '2023-12-01',
          // '2024-01-01',
        ],
        //页码
        pageNumber: 1,
        //每页数量
        pageSize: 10,
        //总条数
        total: 0,
        //列表数据
        list: [],
      }
    },
    created() {
      this.tableHeight = window.innerHeight - 120
    },
    updated() {
      this.$nextTick(() => {
        this.$refs.tableData.doLayout();
      });
    },
    mounted() {

      // 设置表格高度
      this.tableHeight = window.innerHeight - 120
      // / 监听浏览器窗口变化，动态计算表格高度，
      window.onresize = () => {
        return (() => {
          this.tableHeight = window.innerHeight - 120
        })()
      }

      // 获取当前时间
      const today = new Date();
      // 获取当前时间(today)的年份
      const year = today.getFullYear();
      // 获取月份
      const month = String(today.getMonth() + 1).padStart(2, '0');
      // // 获取当前日
      // const day = String(today.getDate()).padStart(2, '0');
      // // 得到年月日
      // const thisDayDate = `${year}-${month}-${day}`; //打印当前日期
      console.log(year, month)
      let ym = year + '-' + month
      this.valueData[0] = ym + '-' + '01'
      this.valueData[1] = ym + '-' + this.getLastDayOfMonth(year, month)
      console.log(this.valueData)
      this.getPageAccountDetailList()
    },
    methods: {

      // 获取某年某月的最后一天
      getLastDayOfMonth(year, month) {
        var date = new Date(year, month - 1, '01');
        //设置日期
        date.setDate(1);
        //设置月份
        date.setMonth(date.getMonth() + 1);
        //获取本月的最后一天
        var cdate = new Date(date.getTime() - 1000 * 60 * 60 * 24);
        //返回结果
        return cdate.getDate();
      },
      rangeChange() {
        console.log('时间范围', this.valueData)
        // console.log(this.tableData)
        // this.tableData[0].sDate = this.valueData[0]
        // this.tableData[0].eDate = this.valueData[1]
        // console.log(this.tableData)
        if (!this.valueData) {
          this.valueData = []
        }
        this.getPageAccountDetailList()
      },
      handleExport2() {
        let auditResult = prompt('报表名字：');
        if (auditResult != null && auditResult != "") {
          exportToExcel('#table', auditResult);
        }
      },
      addDate(strDate) {
        let dateFormat = new Date(strDate);
        dateFormat = dateFormat.setDate(dateFormat.getDate() + 1);
        dateFormat = new Date(dateFormat);
        let y = dateFormat.getFullYear()
        let m = (dateFormat.getMonth() + 1).toString().padStart(2, '0')
        let d = dateFormat.getDate().toString().padStart(2, '0')
        return `${y}-${m}-${d}`
      },
      async getPageAccountDetailList() {
        let res = await this.$API.running.dynamicExtensionTable({
          endTime: this.addDate(this.valueData[1]),
          startTime: this.valueData[0]
        })
        console.log('财务统计表-作品加热表', res)
        // this.total = res.data.sumLine;
        this.list = res.data;
      },
      handleSizeChange(val) {
        // console.log(`每页 ${val} 条`);
        this.pageSize = val
      },
      handleCurrentChange(val) {
        // console.log(`当前页: ${val}`);
        this.pageNumber = val
      },
      // filterTag(value, row) {
      //   console.log(value, row)
      //   return row.operateType == value;
      // },
    }
  }
</script>

<style scoped>
  .el-table {
    overflow: visible !important;
  }
</style>